<template>
  <div class="page-container check-analysis">
    <div class="box-title">数据考核 · 考核分析</div>
    <el-card shadow="none">
      <el-row :gutter="30">
        <el-col :span="9">
          <div class="box box1 f-c" style="height: 343px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div>
                  <div class="radar-chart-top-title">集群主机数量</div>
                  <div class="radar-chart-top-value__wrap f-r">
                    <div class="radar-chart-top-value">14.7</div>
                    <div class="radar-chart-top-unit">分</div>
                  </div>
                </div>
                <div class="radar-chart-top__rate f-r a-c">
                  <div class="radar-chart-top__rate-name">月同比：</div>
                  <div class="radar-chart-top__rate-value">0.54分</div>
                  <div class="icon-up" />
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option1" />
              </div>
            </div>
            <div class="radar-chart-bottom f-r a-c j-b">
              <div class="radar-chart-bottom__text">低于平均得分部门数</div>
              <div class="radar-chart-bottom__value">23个</div>
            </div>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="box box1 f-c" style="height: 343px">
            <div class="box-title">考核排名 Top10</div>
            <div class="rank-content f-g f-r">
              <div class="rank-left f-1 f-c j-b">
                <div v-for="(item,index) in rankList.slice(0,5)" :key="index" class="rank-item f-r a-c">
                  <div class="f-r a-c">
                    <span class="item-color first">{{ index + 1 }}</span>
                    <span>{{ item.name }}</span>
                    <span class="item-value">{{ item.value }}</span>
                    <span class="item-unit">分</span>
                  </div>
                </div>
              </div>
              <div class="rank-right f-1 f-c j-b">
                <div v-for="(item,index) in rankList.slice(5)" :key="index" class="rank-item f-r a-c">
                  <div class="f-r a-c">
                    <span class="item-color first">{{ index + 5 }}</span>
                    <span>{{ item.name }}</span>
                    <span class="item-value">{{ item.value }}</span>
                    <span class="item-unit">分</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="none" style="margin: 30px 0">
      <div class="box-title">各指标每月平均得分趋势图</div>
      <div style="height: 310px">
        <v-chart autoresize style="width: 100%;height: 100%;" :option="option2" />
      </div>
    </el-card>
    <div class="box-title">各部门评价得分统计</div>
    <el-card shadow="none">
      <el-row :gutter="30">
        <el-col :span="9">
          <div class="box box1 f-c" style="height: 343px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div>
                  <div class="radar-chart-top-title">集群主机数量</div>
                  <div class="radar-chart-top-title2">评价总评分</div>
                  <div class="radar-chart-top-value__wrap f-r">
                    <div class="radar-chart-top-value">14.7</div>
                    <div class="radar-chart-top-unit">分</div>
                  </div>
                </div>
                <div>
                  <div class="radar-chart-top__rate f-r a-c" style="margin-bottom: 15px">
                    <div class="radar-chart-top__rate-name">排名</div>
                    <div class="radar-chart-top__rate-value">3名</div>
                  </div>
                  <div class="radar-chart-top__rate f-r a-c" style="margin-bottom: 15px">
                    <div class="radar-chart-top__rate-name">月同比：</div>
                    <div class="radar-chart-top__rate-value">3</div>
                    <div class="icon-up" />
                  </div>
                  <div class="radar-chart-top__rate f-r a-c" style="margin-bottom: 0px">
                    <div class="radar-chart-top__rate-name">平均分：</div>
                    <div class="radar-chart-top__rate-value">3</div>
                    <div class="icon-up" />
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option1" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="box box1 f-c" style="height: 343px;position: relative">
            <div class="box-title" style="position: absolute;left: 34px;top:34px">每月评分趋势图</div>
            <v-chart autoresize style="width: 100%;height: 100%;" :option="option3" />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card1" shadow="none" style="margin: 30px 0">
      <div class="f-r a-c j-b">
        <div v-for="(item,index) in tagList" :key="index">
          <div class="f-r a-c">
            <el-image :src="item.img" style="width:70px;height: 70px " />
            <div class="group_37 f-c j-b">
              <span class="text_15">{{ item.name }}</span>
              <div class="text-wrapper_26 f-r a-e">
                <span class="text_16">{{ item.value }}</span>
                <span class="text_17">{{ item.unit }}</span>
              </div>
            </div>
          </div>
          <div class="f-r a-c j-b radar-chart-top__rate">
            <div class="f-r a-c">
              <div class="radar-chart-top__rate-name">月同比</div>
              <div class="radar-chart-top__rate-value">{{ item.value2 }}</div>
              <div class="icon-up" />
            </div>
            <div class="radar-chart-top__rate-name">总分: {{ item.total }}</div>
          </div>
        </div>

      </div>
    </el-card>

  </div>
</template>

<script>
const metricList = [
  { name: '指标1', color: '#FF8786' },
  { name: '指标2', color: '#FFB33C' },
  { name: '指标3', color: '#3CE9C8' },
  { name: '指标4', color: '#4C86F6' },
  { name: '指标5', color: '#A19CFF' }
]
export default {
  name: 'CheckAnalysis',
  data() {
    return {
      option1: {
        radar: {
          center: ['65%', '50%'],
          indicator: [
            { name: '治理', max: 100 },
            { name: '采集', max: 100 },
            { name: '问题处理', max: 100 },
            { name: '数据目录', max: 100 },
            { name: '交换', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            data: [
              {
                value: [80, 70, 50, 40, 30],
                name: '1'
              },
              {
                value: [100, 90, 60, 75, 50],
                name: '2'
              },
              {
                value: [20, 45, 33, 99, 50],
                name: '3'
              }
            ]
          }
        ]
      },
      rankList: [
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 },
        { name: '交通局', value: 17.1 }
      ],
      option2: {
        legend: {
          show: true,
          right: 0,
          top: 0,
          itemWidth: 30,
          itemHeight: 4,
          itemGap: 20,
          icon: 'rect',
          data: metricList
        },
        grid: {
          left: '0',
          right: '0',
          top: 70,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2020-03', '2020-03', '2020-03', '2020-03', '2020-03', '2020-03', '2020-03'],
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        yAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          }

        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: metricList.map((el, index) => {
          return {
            name: el.name,
            data: [120 + index * 20, 200 + index * 20, 150 + index * 20, 80 + index * 20, 70 + index * 20, 110 + index * 20, 130 + index * 20],
            type: 'line',
            symbol: 'none',
            smooth: true,
            itemStyle: {
              color: el.color
            }
          }
        })
      },
      option3: {
        legend: {
          show: true,
          right: 0,
          top: 0,
          itemWidth: 30,
          itemHeight: 4,
          itemGap: 20,
          icon: 'rect',
          data: metricList
        },
        grid: {
          left: '0',
          right: '0',
          top: 70,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2020-03', '2020-03', '2020-03', '2020-03', '2020-03', '2020-03', '2020-03'],
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        yAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          }

        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: metricList.map((el, index) => {
          return {
            name: el.name,
            data: [120 + index * 20, 200 + index * 20, 150 + index * 20, 80 + index * 20, 70 + index * 20, 110 + index * 20, 130 + index * 20],
            type: 'line',
            symbol: 'none',
            smooth: true,
            itemStyle: {
              color: el.color
            }
          }
        })
      },
      tagList: [
        {
          name: '采集评分',
          unit: '分',
          value: 20,
          value2: 10,
          total: 30,
          img: require('@/assets/data-check-analysis/1.png')
        },
        {
          name: '治理评分',
          unit: '分',
          value: 20,
          value2: 10,
          total: 30,
          img: require('@/assets/data-check-analysis/2.png')
        },
        {
          name: '交换评分',
          unit: '分',
          value: 20,
          value2: 10,
          total: 30,
          img: require('@/assets/data-check-analysis/3.png')
        },
        {
          name: '数据目录评分 ',
          unit: '分',
          value: 20,
          value2: 10,
          total: 30,
          img: require('@/assets/data-check-analysis/4.png')
        },
        {
          name: '问题处理评分',
          unit: '分',
          value: 20,
          value2: 10,
          total: 30,
          img: require('@/assets/data-check-analysis/5.png')
        }
      ]

    }
  }
}
</script>

<style lang="scss">
.check-analysis {
  .box-title {
    margin-bottom: 15px;
  }
  .box {
    border: 1px solid #ECF0F8;
  }
  .icon-up {
    background-image: url("~@/assets/data-check-analysis/up.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16px;
    height: 20px;
    margin-bottom: 6px;
  }
  .icon-down {
    background-image: url("~@/assets/data-check-analysis/down.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16px;
    height: 20px;
  }
  .box1 {
    padding: 32px;
    .box-title {
      font-size: 20px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      margin-bottom: 22px;
    }
    .radar-chart-top {
      .radar-chart-top-title {
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: 22px;
      }
      .radar-chart-top-title2 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 0.8;
        margin-bottom: 5px;
      }
      .radar-chart-top-value__wrap {
        font-family: Microsoft YaHei;
        font-weight: 500;
        color: #5C95F6;
        .radar-chart-top-value {
          font-size: 30px;
          line-height: 24px;
        }
        .radar-chart-top-unit {
          display: inline-block;
          font-size: 18px;
          margin-top: 4px;
        }
      }
      .radar-chart-top__rate {
        margin-bottom: 30px;
        width: 100%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 0.8;
        .radar-chart-top__rate-value {
          opacity: 1;
          margin-left: 10px;
          margin-right: 5px;
        }
      }
    }
    .radar-chart-bottom {
      flex-shrink: 0;
      padding-top: 20px;
      border-top: 2px dashed rgba(0, 82, 217, .5);
      font-size: 16px;
      line-height: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
    }
  }
  .rank-item {
    .item-color {
      display: inline-block;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: rgb(236, 240, 248);
      margin: 0px 15px;
      text-align: center;
      line-height: 35px;
      font-size: 18px;
    }
    .item-value {
      margin-left: 50px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ED2826;
    }
    .item-unit {
      margin-left: 3px;
      margin-top: 2px;
    }
  }
  .rank-left {
    .rank-item:nth-of-type(1) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #FF7474, #FFC1BF);
    }
    .rank-item:nth-of-type(2) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #29DCC9, #45EFC8);
    }
    .rank-item:nth-of-type(3) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #70A8F6, #427DF6);
    }
  }
  .card1 {
    .el-card__body {
      padding: 45px !important;
    }
    .radar-chart-top__rate {
      padding-top: 20px;
      margin-top: 30px;
      border-top: 2px dashed rgba(0, 82, 217, .5);
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
      .radar-chart-top__rate-value {
        opacity: 1;
        margin-left: 10px;
        margin-right: 5px;
      }
      .el-image {
        width: 16px;
        height: 20px;
      }
    }

    .group_37 {
      padding: 4px 15px 4px 40px;
      height: 70px;
    }
    .text_15 {
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_16 {
      overflow-wrap: break-word;
      color: #333333;
      font-size: 30px;
      line-height: 30px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_17 {
      line-height: 16px;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
      margin-bottom: 5px;
      margin-left: 4px;
    }
  }

}
</style>
